<template>
  <view class="cart" v-if="cart.length>0">
    <!-- 收货地址 -->
    <my-address></my-address>
    <!-- 商品列表 -->
    <view class="list">
      <!-- 标题区域 -->
      <view class="title">
        <uni-icons type="shop" size="20"></uni-icons>购物车
      </view>
      <uni-swipe-action>
        <uni-swipe-action-item :right-options="options" v-for="(item,index) in cart" :key="index"
          @click="swipeClick(item.goods_id)">
          <my-goods @changeCount="changeCount" @changeEvent="changeEvent" :isShow="true" :item="item"></my-goods>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>
    <!-- 结算区域 -->
    <view class="total">
      <my-total></my-total>
    </view>

  </view>
  <!-- 暂无商品的对应图片 -->
  <view class="nodata" v-else>
    <image src="../../static/images/cart_empty@2x.png" mode=""></image>
    <view class="word">
      空空如也~
    </view>
  </view>

</template>

<script>
  import myMixin from '@/mixins/myMixin.js'
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#c00000'
          }
        }]
      };
    },
    mixins: [myMixin],
    computed: {
      ...mapState('cart', ['cart'])
    },
    methods: {
      changeEvent(id) {
        this.$store.commit('cart/setStatus', id)
        // console.log('子传父，触发父组件方法:changeEvent');
      },
      changeCount(obj) {
        this.$store.commit('cart/setCount', obj)
      },
      async swipeClick(id) {
        // console.log('删除点击', e);
        const res = await uni.showModal({
          title: '温馨提示',
          content: '您确定删除该商品吗？'
        })
        if (res.confirm === true) {
          // 删除操作
          this.$store.commit('cart/delGoods', id)
        }
        // console.log(res);
      }

    }
  }
</script>

<style lang="scss" scoped>
  .cart {
    padding-bottom: 100rpx;

    .list {
      .title {
        padding: 20rpx;
        border-bottom: 1px solid #eff0ef;
      }
    }
  }

  .nodata {
    margin-top: 100px;
    text-align: center;

    image {
      width: 200rpx;
      height: 200rpx;
    }

    .word {
      font-size: 12px;
      color: #80809c;
      margin-top: 20rpx
    }
  }
</style>